<template>
  <div>
    <n-modal
      v-if="props.showModal"
      v-model:show="props.showModal"
      :mask-closable="true"
      @update:show="$emit('CheckShowModal', false)"
    >
      <n-card
        style="width: 600px"
        title="添加政策法规"
        :bordered="false"
        size="huge"
        role="dialog"
        aria-modal="true"
      >
        <template #header-extra>
          <n-button type="error" @click="$emit('CheckShowModal', false)">
            X
          </n-button>
        </template>
        <n-form ref="formRef" :model="model" :rules="rules">
          <n-form-item path="rTitle" label="名称">
            <n-input v-model:value="model.rTitle" placeholder="请输入名称" />
          </n-form-item>
          <n-form-item path="rDate" label="日期">
            <n-date-picker
              v-model:value="timeSet"
              type="datetime"
              clearable
              placeholder="请选择时间"
              @update:value="genxin"
            />
          </n-form-item>
          <n-form-item path="rContent" label="内容">
            <n-input v-model:value="model.rContent" placeholder="请输入内容" />
          </n-form-item>
          <UpLoad @filename="filename"></UpLoad>
          <n-row :gutter="[0, 24]">
            <n-col :span="24">
              <div style="display: flex; justify-content: center">
                <n-button round type="primary" @click="UpdateUserFile">
                  添加
                </n-button>
              </div>
            </n-col>
          </n-row>
        </n-form>
      </n-card>
    </n-modal>
    <n-skeleton v-else text :repeat="2" />
    <n-skeleton text style="width: 60%" />
  </div>
</template>

<script lang="ts" setup>
import { defineProps, ref, reactive } from "vue";
import { addRegu } from "@/api/politics";
import UpLoad from "@/components/upload/UpLoad.vue";
const formRef = ref();
const emit = defineEmits(["CheckShowModal", "reloadpage"]);
const props = defineProps({
  showModal: {
    type: Boolean,
    default: false,
  },
});
const timeSet: any = ref(null);
const model = reactive({
  rTitle: "",
  rDate: "",
  rContent: "",
  rImg: "",
});
const imglink=ref()
const add0 = (m: any) => {
  return m < 10 ? "0" + m : m;
};
const timeData = (data: any) => {
  var time = new Date(data);
  var y = time.getFullYear();
  var m = time.getMonth() + 1;
  var d = time.getDate();
  var h = time.getHours();
  var mm = time.getMinutes();
  var s = time.getSeconds();
  model.rDate = `${y}-${add0(m)}-${add0(d)} ${add0(h)}:${add0(mm)}:${add0(s)}`;
};
const genxin = () => {
  timeData(timeSet.value);
};
const rules = {
  rTitle: [
    {
      required: true,
      message: "请输入名称",
      trigger: ["input", "blur"],
    },
  ],
  rContent: [
    {
      required: true,
      message: "请输入内容",
      trigger: ["input", "blur"],
    },
  ],
  rImg: [
    {
      required: true,
      message: "请输入图片URL",
      trigger: ["input", "blur"],
    },
  ],
};
const filename = (val:any) => {
    model.rImg=val
}
// const fileself= (val:any) => {
//     console.log("文件上传1", val)
//     imglink.value=val
// }
const UpdateUserFile = (e: Event) => {
  e.preventDefault();
  formRef.value.validate((err: any) => {
    if (err) {
      console.log(err);
    } else {
      addRegu(model).then((res: any) => {
        console.log(model);
        emit("CheckShowModal", false);
        emit("reloadpage");
      });
    }
  });
};
</script>

<style scoped lang="scss"></style>
